import React, { Component } from 'react'
import { NavLink , Link } from 'react-router-dom'
// import { NavigationActions } from 'react-navigation'
import qs from "qs";
import { Toast, Modal } from 'antd-mobile'


import {LoginStyled} from './LoginStyled'
import Fanhui from 'images/nav/whiteback.png'
import Logo from 'images/my/logo.png'
import userImg from 'images/login/userImg.png'
import pswImg from 'images/login/pswImg.png'
import qingchu from 'images/login/qingchu.png'
import yj from 'images/login/yj.png'

// 头部引入
import Navigation from 'components/Navigation/Navigation'
import Button from 'components/UIButton/UIButton'

import { userData } from 'pages/dengluzhuce/model/userData.js'

import connect from 'pages/redux-component/connect'
import {SAGA_ISLOGIN} from 'pages/redux-component/actionType'
import { from } from 'rxjs';

let body = {}


class Login extends Component {
  state = {
    showPass : true,
  }
  render() {
    console.log(this.props)
        
    return (
      <LoginStyled>
        <Navigation
          leftImg={Fanhui}
          leftImgWidth='.2rem'
          leftImgHeight='.2rem'
          leftPadding='0 0 0 .15rem'
          title = "登录"
          titleSize = '.17rem'
          clickLeft={() => this.onClickLeft("left")}
        ></Navigation>

        <div className="fromwrap">
          <img className='logo' src={Logo} alt=""/>
          <div className='one wrap'>
            <img src={userImg} alt=""/>
            <div className='fu fu1'>
            <input ref='user' className='user' type="text" placeholder='请输入账户'/>
            <Button
            img={qingchu}
            width='.3rem'
            height='.3rem'
            imgWidth='.18rem'
            imgHeight= '.18rem'
            imgGrow = '0'
            clickButton = {this.clickClearBtn}
            ></Button>
            </div>
          </div>
          <div className='two wrap'>
            <img src={pswImg} alt=""/>
            <div className='fu fu2'>
            <input ref='password' className='password' type="password"  placeholder='请输入密码'/>
            <Button
            img={yj}
            width='.3rem'
            height='.3rem'
            imgWidth='.16rem'
            imgHeight= '.16rem'
            imgGrow = '0'
            selected= {this.state.showPass}
            clickButton = {this.clickClearChangeShow}></Button>
            </div>
          </div>
          <div className='three wrap'>
            <Link to='/myChildRouter/signin'>
              <span>新用户注册</span>
            </Link>
            &nbsp; | &nbsp;
            <Link to='/myChildRouter/forgetpsw'>
              <span>忘记密码</span>
            </Link>
          </div>
          <Button
          title='登录'
          width='100%'
          height='.35rem'
          backgroundColor='#23B5B7'
          titleColor='#fff'
          titleSzie='.16rem'
          borderRadius='.05rem'
          clickButton={this.clickLogin}
          ></Button>
        </div>

      </LoginStyled>
    );
  }

  onClickLeft() {
    this.props.history.go(-1)
  }
  clickClearBtn=()=>{
    console.log('清空')
    const useIpt = document.getElementsByClassName('user')[0]
    useIpt.value = ''
  }
  clickClearChangeShow=()=>{
    // console.log('明文')
    // console.log(this.state.showPass)
    this.setState({
      showPass: !this.state.showPass,
    },()=>{
      console.log(this.state.showPass)
      if(this.state.showPass){
        this.refs.password.type='password'
      }else{
        this.refs.password.type='text'
      }
    }) 
  }
  componentDidUpdate(){
    if(!!this.props.isLogin){
      this.props.history.push('/index/home')
    }
  }
   clickLogin= async ()=>{
   
    if(!this.refs.user.value){
      Toast.info('请输入用户名！',1.5)
      return
    }
    if(!this.refs.password.value){
      Toast.info('请输入密码！',1.5)
      return
    }
    body.email = this.refs.user.value
    body.password = this.refs.password.value
    this.props.sagaChangelogin(body) 

  
    console.log(userData)
    fetch('/Legang/user/login',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      console.log(result)
      
      if(result.flag){
        console.log(result.data)
        userData.uid = result.data.uid
        userData.himg = result.data.himg
        userData.exp = result.data.exp
        userData.username = result.data.username

        // replace替换当前路由，路由表中不存在本页路由
        // this.props.history.replace('/index/home')
        this.props.history.push('/index/home')
      }else{
        Toast.info(result.errorMsg,1.5)
      }
    })

  }
}

export default connect(Login)



  

  // Reset - 用新状态替换当前状态
  // Replace - 用另一条路线替换给定键的路线
  // Push - 在堆栈顶部添加路由，然后向前导航到该路径
  // Pop - 导航回以前的路线
  // PopToTop - 导航到堆栈的顶部路径，解除所有其他路径

